<template>
    <div id="app">
        {{ count }} {{double}}
    </div>
</template>

<script>
    import { reactive, toRefs, computed } from '@vue/composition-api'

    export default {
        name: 'App',
        setup() { // Vue3.0的入口函数，beforeCreate之前进行触发

            // 不具备数据响应式
            // const state1 = reactive({
            //   count1: 0
            // });
            // setTimeout(() => {
            //   state1.count++;
            // }, 1000)
            // return state1;

            // 具备响应式
            // const state2 = reactive({
            //     count2: 0
            // });
            // setTimeout(() => {
            //     state2.count2++;
            // }, 1000)
            // return {
            //     state2
            // };

            // 不具备数据响应式
            // const state3 = reactive({
            //     count3: 0
            // });
            // setTimeout(() => {
            //     state3.count3++;
            // }, 1000)
            // return {
            //     count3: state.count3
            // }

            // const count4 = ref(0);
            // setTimeout(() => {
            //     count4.value4++
            // });
            // return {
            //     count4
            // };

            // 解决响应式数据心智负担
            // const count5 = ref(0);
            // const state5 = reactive({
            //     count5
            // });
            // setInterval(() => {
            //     state5.count5++;
            // }, 1000)
            // return {
            //     count5
            // }

            // 把普通的数据，转成ref()方法所对应的响应式数据
            // const state = reactive({
            //     count: 0
            // });
            // const { count } = toRefs(state);
            // setInterval(() => {
            //     state.count++;
            // }, 1000);
            // return {
            //     count
            // }

            // const state = reactive({
            //     count: 0
            // })
            //
            // const count = toRef(state, 'count');
            // setInterval(() => {
            //     state.count++;
            // }, 1000);
            //
            // return {
            //     count
            // }

            // const state = reactive({
            //     count: 1
            // });
            //
            // setInterval(() => {
            //     state.count++;
            // }, 1000);
            //
            // return toRefs(state)

            // 计算属性
            // const state = reactive({
            //     count: 1
            // })
            // const { count } = toRefs(state);
            // const double = computed(() => {
            //     return state.count * 2
            // });
            //
            // return {
            //     count,
            //     double
            // }

            const state = reactive({
                count: 1,
                double: computed(() => {
                    return state.count * 2
                })
            });

            setInterval(() => {
                state.count++
            }, 1000)

            return toRefs(state);
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
